<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/ontesChild.css">
    <script src="js/ontesChild.js"></script>
    <script src="js/same.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div id="header">
        <div class="logo">
            <img src="images/logo.png" alt="">
        </div>
        <ul class="nav01">
            <li><a href="index.html">首页</a ></li>
            <li><a href="Menu1.html">菜谱^ </a>
                <dl>
                    <dt>  家常菜</dt>
                        <dd>热菜</dd>
                        <dd>主食</dd>
                        <dd>汤</dd>
                        <dd>早餐</dd>
                        <dd>午餐</dd> 
                        </dl>
                 <dl>
                        <dt>中国菜系 </dt>
                        <dd>粤菜</dd>
                        <dd>北菜</dd>
                        <dd>湘菜</dd>
                        <dd>浙菜</dd>
                        <dd>湖北菜</dd>
                 </dl>   
                   
            </li>
            <li><a href="heath.html">饮食健康^</a>
                <dl>
                    <dt>    <a href="heath.html">饮食健康  </a> </dt>
                        <dd>饮食新闻  </dd>
                        <dd><a href="">美容瘦身  </a> </dd>
                        <dd><a href="">饮食小常识</a></dd>
                        <dd><a href="">功能性调理</a></dd>
                        <dd><a href="">清热火    </a></dd> 
                        </dl>
                 <dl>
                        <dt> <a href="heath.html">人群膳食 </a></dt>
                        <dd>减肥</dd>
                        <dd>祛痰</dd> 
                        <dd>滋阴壮阳</dd>
                        <dd>健脾养胃</dd>
                        <dd>人群膳食</dd>
                 </dl>   
                 <dl>
                    <dt> <a href="heath.html">健康常识 </a></dt>
                    <dd>减肥</dd>
                    <dd>祛痰</dd>
                    <dd>滋阴壮阳</dd>
                    <dd>健脾养胃</dd>
                    <dd>人群膳食</dd>
             </dl>
             <dl>
                <dt> <a href="heath.html">药膳养生 </a></dt>
                <dd>减肥</dd>
                <dd>祛痰</dd>
                <dd>滋阴壮阳</dd>
                <dd>健脾养胃</dd>
                <dd>人群膳食</dd>
         </dl>   
             
                 
           
                </li>
            <li><a  href="ontes.html">笔记</a></li>
          <li>  <input type="text" placeholder="搜索菜谱，菜单，食材，用户"><input type="button" value="" id="sear"></li>
            <li><input type="button" value="发布">
            <ul>
                <li><a href="PublishOntes.html">发布笔记</a ></li>
                <li><a href="PublishMenu.html">发布菜谱</a ></li>
            </ul>
            </li>
            <li style="display: block;"><a href="login.html">登录</a>|<a href="zhuce.html">注册</a></li>
             <span></span>
            <div style="clear: left;"></div>
           
            </ul>
        </div>
    <main>
        <div id="left" class="col-xs-12 col-xs-push-2 col-sm-12 col-md-12 col-lg-9 col-lg-push-0">
            <img src="images/bai01.jpg" id="loopPic">
            <ul class="lunboul">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        <div id="right" class="visible-lg col-lg-3">
            <h3>相关笔记</h3>
            <div class="note">
                <div class="noteleft">
                    <img src="images/b11.jpg">
                </div>
                <div class="noteright">
                    <span onclick="showInfo('🌈彩虹吐司三明治')">🌈彩虹吐司三明治</span></a>
                </div>
            </div>
            <div class="note">
                <div class="noteleft">
                    <img src="images/b16.jpeg">
                </div>
                <div class="noteright">
                    <span onclick="showInfo('记录，与温暖的食物相伴')">记录，与温暖的食物相伴</span></a>
                </div>
            </div>
            <div class="note">
                <div class="noteleft">
                    <img src="images/b03.jpg">
                </div>
                <div class="noteright">
                    <span  onclick="showInfo('愉悦，美味佳肴，都是因为用心')">愉悦，美味佳肴，都是因为用心</span></a>
                </div>
            </div>
            <div class="note">
                <div class="noteleft">
                    <img src="images/b18.jpeg">
                </div>
                <div class="noteright">
                    <span  onclick="showInfo('北海道吐司面包')">北海道吐司面包</span></a>
                </div>
            </div>
            <div class="note">
                <div class="noteleft">
                    <img src="images/b08.jpeg">
                </div>
                <div class="noteright">
                    <span onclick="showInfo('水果餐')">水果餐</span></a>
                </div>
            </div>
        </div>
        <div id="information" class="col-xs-12 col-xs-push-2 col-sm-12 col-md-12 col-lg-8 col-lg-push-0">
            <h2>鲜虾滑蛋吐司+滑蛋生菜牛角包</h2>
            <div id="info">
                <a href="">
                    <img src="images/btouxiang1.PNG" alt="" class="touxiang">
                    <span>呱呱家的妈妈</span>
                </a>
                <input type="button" value="+关注" class="guanzhu test">
                <img src="images/bkongxin.PNG" alt="" class="xin">
                <input type="button" value="收藏" class="collect test" onclick="coll()">
            </div>
            <div id="xiu">
                <h3>#秀早餐</h3>
                <p>早安[太阳] 早晨打卡：鲜虾滑蛋吐司 滑蛋生菜牛角包 火龙果 牛奶</p>
                <span class="span1">创建时间：1天前</span>
            </div>
            <div id="discuss">
                <h3>评论</h3>
                <div class="d1">
                    <img src="images/btouxiang13.PNG"><span>尹洁</span>
                    <p>手动比心？</p>
                    <span class="span2">1天前</span>
                    <hr>
                </div>
                <div class="d1">
                    <img src="images/btouxiang11.PNG"><span>白直人2017</span>
                    <p>棒极啦，收~</p>
                    <span class="span2">1天前</span>
                    <hr>
                </div>
                <div class="d1">
                    <img src="images/btouxiang12.PNG"><span>柠萌我不萌iEd</span>
                    <p>顶一下，太好了啊</p>
                    <span class="span2">1天前</span>
                </div>
            </div>
        </div>
        <div id="pinglun" class="col-xs-12 col-xs-push-2 col-sm-12 col-md-12 col-lg-9 col-lg-push-0">
            <textarea name="" id="ping"></textarea><br>
            <input type="button" value="发表评论" id="publish">
        </div> 
        <footer>
            <div class="foot">
                <ul class="f1">
                    <li>关于食界</li>
                    <li>食界美食</li>
                    <li>意见反馈</li>
                    <li>品牌馆</li>
                    <li>菜谱大全</li>
                </ul>
                <p>@2016-2020 欢迎访问我们食界 <a href="">唯有爱与美食不可辜负</a> </p>
            </div>
        </footer>
        
    </main>
    
</body>
</html>